// light-dark-8deg-animation
@keyframes light-to-dark {
    from {
        clip-path: polygon(0 0,
                0 0,
                calc(tan(8deg) * -100vh) 100%,
                calc(tan(8deg) * -100vh) 100%);
    }

    to {
        clip-path: polygon(0 0,
                calc((tan(8deg) * 100vh) + 100%) 0,
                100% 100%,
                calc(tan(8deg) * -100vh) 100%);
    }
}

@keyframes dark-to-light {
    from {
        clip-path: polygon(calc((tan(8deg) * 100vh) + 100%) 0,
                calc((tan(8deg) * 100vh) + 100%) 0,
                100% 100%,
                100% 100%);
    }

    to {
        clip-path: polygon(0 0,
                calc((tan(8deg) * 100vh) + 100%) 0,
                100% 100%,
                calc(tan(8deg) * -100vh) 100%);
    }
}

:root::view-transition-group(root) {
    animation-duration: 1s;
}

:root::view-transition-new(root),
:root::view-transition-old(root) {
    mix-blend-mode: normal;
}

:root::view-transition-old(root),
:root[theme-mode='dark']::view-transition-old(root) {
    animation: none;
}

:root::view-transition-new(root) {
    animation-name: dark-to-light;
}

:root[theme-mode='dark']::view-transition-new(root) {
    animation-name: light-to-dark;
}